import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
import { Box, Table, TableBody, TableCell, TableHead, TableRow, Typography } from '@mui/material';
import { format } from 'date-fns';
import React from 'react';
import { Area, AreaChart, Bar, BarChart, CartesianGrid, Tooltip, XAxis, YAxis } from 'recharts';

import MainLayout from '../../components/HOCs/main-layout';
import { GFSButton } from '../../components/shared/button/gfs-button';
import NewProgressBar from '../../components/shared/new-progress-bar';
import GFSTable from '../../components/shared/tables/gfs-table';
import NumberTool from '../../libs/number-tool';

const data = [
    {
        name: 'Jan',
        uv: 0,
        pv: 0
    },
    {
        name: 'Feb',
        uv: 3000,
        pv: 0
    },
    {
        name: 'Mar',
        uv: 3000,
        pv: 9000
    },
    {
        name: 'Apr',
        uv: 9000,
        pv: 10000
    },
    {
        name: 'May',
        uv: 15000,
        pv: 5000
    },
    {
        name: 'Jun',
        uv: 6000,
        pv: 7000
    },
    {
        name: 'July',
        uv: 0,
        pv: 0
    },
    {
        name: 'Aug',
        uv: 0,
        pv: 0
    }
];

const barChartData = [
    {
        a: 20,
        b: 40,
        c: 40,
        d: 60,
        e: 50,
        f: 90,
        g: 80,
        h: 95
    }
];

const item = {
    name: 'XLD Design',
    timestamp: 1668186000000,
    amount: '2340.32',
    status: 0
};

const items = [
    item,
    {
        name: 'XLD Admin',
        timestamp: 1668186000000,
        amount: '2340.32',
        status: 1
    },
    {
        name: 'XLD Payments',
        timestamp: 1668186000000,
        amount: '2340.32',
        status: 2
    },
    ...Array.from(Array(9)).map(() => item)
];

const statusCodeToObject = new Map();
statusCodeToObject.set(0, { text: 'SUCCESS', color: '#0FF1A0' });
statusCodeToObject.set(1, { text: 'PROCESSING', color: '#E06C52' });
statusCodeToObject.set(2, { text: 'FAILED', color: '#FF015C' });

const renderStatus = (status: number) => (
    <Typography sx={{ color: statusCodeToObject.get(status).color }}>
        {statusCodeToObject.get(status).text}
    </Typography>
);

const NewUIPage = () => {
    return (
        <MainLayout>
            <Box className="d-flex align-items-center flex-column pt-5 w-100">
                <AreaChart
                    width={730}
                    height={250}
                    data={data}
                    margin={{ top: 10, right: 30, left: 0, bottom: 0 }}
                    className={'mb-5'}
                >
                    <defs>
                        <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
                            <stop offset="5%" stopColor="#00C7FF" stopOpacity={0.7} />
                            <stop offset="95%" stopColor="#00C7FF" stopOpacity={0} />
                        </linearGradient>
                        <linearGradient id="colorPv" x1="0" y1="0" x2="0" y2="1">
                            <stop offset="5%" stopColor="#FF00A9" stopOpacity={0.4} />
                            <stop offset="95%" stopColor="#FF00A9" stopOpacity={0} />
                        </linearGradient>
                    </defs>
                    <XAxis tickLine={false} dataKey="name" fontSize={11} />
                    <YAxis tickLine={false} fontSize={11} />
                    <CartesianGrid
                        stroke="#211F3D"
                        strokeWidth="0.5"
                        horizontal={true}
                        vertical={false}
                    />
                    <Tooltip cursor={false} wrapperStyle={{ display: 'none' }} />
                    <Area
                        type="monotone"
                        dataKey="uv"
                        stroke="#00C7FF"
                        fillOpacity={1}
                        fill="url(#colorUv)"
                    />
                    <Area
                        type="monotone"
                        dataKey="pv"
                        stroke="#FF00A9"
                        fillOpacity={1}
                        fill="url(#colorPv)"
                    />
                </AreaChart>

                <Box
                    className="d-flex justify-content-center align-items-center flex-column"
                    sx={{ width: 300, p: 2, pl: 4, background: '#0B0821', borderRadius: '12px' }}
                >
                    <BarChart width={279} height={250} data={barChartData} barGap={10}>
                        <CartesianGrid
                            horizontal={true}
                            vertical={false}
                            stroke="#211F3D"
                            strokeWidth="0.5"
                        />
                        <YAxis
                            tickLine={false}
                            stroke="rgba(255, 255, 255, 0.87)"
                            ticks={[0, 10, 30, 50, 70, 90]}
                            tickFormatter={(value) => `${value}%`}
                            orientation="right"
                            axisLine={false}
                            fontSize={12}
                        />
                        <Bar dataKey="a" fill="#950047" barSize={15} />
                        <Bar dataKey="b" fill="#950047" barSize={15} />
                        <Bar dataKey="c" fill="#852879" barSize={15} />
                        <Bar dataKey="d" fill="#E54CD2" barSize={15} />
                        <Bar dataKey="e" fill="#196488" barSize={15} />
                        <Bar dataKey="f" fill="#1CB0F9" barSize={15} />
                        <Bar dataKey="g" fill="#0C7982" barSize={15} />
                        <Bar dataKey="h" fill="#0FE0F1" barSize={15} />
                    </BarChart>
                    <Box
                        className="d-flex justify-content-between align-items-center mb-3"
                        sx={{ minWidth: 250, pt: 2 }}
                    >
                        <Typography variant="subtitle1" sx={{ fontSize: 12, fontWeight: 600 }}>
                            XLD Design:
                        </Typography>
                        <Typography variant="subtitle1" sx={{ fontSize: 12, pr: 2 }}>
                            $363,656.39
                        </Typography>
                    </Box>
                    <Box
                        className="d-flex justify-content-between align-items-center mb-3"
                        sx={{ minWidth: 250 }}
                    >
                        <Typography variant="subtitle1" sx={{ fontSize: 12, fontWeight: 600 }}>
                            XLD Admin:
                        </Typography>
                        <Typography variant="subtitle1" sx={{ fontSize: 12, pr: 2 }}>
                            $363,656.39
                        </Typography>
                    </Box>
                    <Box
                        className="d-flex justify-content-between align-items-center mb-3"
                        sx={{ minWidth: 250 }}
                    >
                        <Typography variant="subtitle1" sx={{ fontSize: 12, fontWeight: 600 }}>
                            XLD Engineering:
                        </Typography>
                        <Typography variant="subtitle1" sx={{ fontSize: 12, pr: 2 }}>
                            $363,656.39
                        </Typography>
                    </Box>
                    <Box
                        className="d-flex justify-content-between align-items-center mb-3"
                        sx={{ minWidth: 250 }}
                    >
                        <Typography variant="subtitle1" sx={{ fontSize: 12, fontWeight: 600 }}>
                            XLD Payments:
                        </Typography>
                        <Typography variant="subtitle1" sx={{ fontSize: 12, pr: 2 }}>
                            $363,656.39
                        </Typography>
                    </Box>
                </Box>

                <Box sx={{ width: 200, pt: 5 }}>
                    <GFSButton variant="outlined">
                        <Typography sx={{ pl: 1 }}>Axie Infinity</Typography>
                        <ArrowDropDownIcon sx={{ fontSize: '2rem' }} />
                    </GFSButton>
                </Box>

                <Box sx={{ width: 200, pt: 5 }}>
                    <GFSButton variant="outlined">
                        <Box
                            component="img"
                            sx={{
                                height: 24,
                                width: 24
                            }}
                            alt="Icon"
                            src={'/metamask.png'}
                        />
                        <Typography sx={{ pl: 1, width: 110 }} noWrap>
                            0xd620c65fb8cdfef51f7121d4d8e6cded52658d08
                        </Typography>
                    </GFSButton>
                </Box>

                <Box sx={{ width: 200, pt: 5 }}>
                    <GFSButton variant="outlined">
                        <Box
                            component="img"
                            sx={{
                                height: 24,
                                width: 24,
                                ml: 1
                            }}
                            alt="Icon"
                            src={'/compass.png'}
                        />
                        <ArrowDropDownIcon sx={{ fontSize: '2rem' }} />
                    </GFSButton>
                </Box>

                <Box sx={{ width: 200, pt: 5 }}>
                    <NewProgressBar progress={80} />
                </Box>

                <Box
                    sx={{ pt: 5, width: 800 }}
                    className="d-flex justify-content-between align-items-center"
                >
                    <Box
                        className="d-flex justify-content-center align-items-center flex-column"
                        sx={{ width: 240, p: 2, background: '#0B0821', borderRadius: '12px' }}
                    >
                        <Box
                            component="img"
                            sx={{
                                height: 80,
                                width: 80,
                                mb: 2
                            }}
                            alt="Icon"
                            src={'/bfnrcz.png'}
                        />
                        <Typography variant="h4" className="mb-1">
                            XLD Admin
                        </Typography>
                        <Typography
                            variant="subtitle1"
                            className="mb-2"
                            sx={{ fontSize: '16px', color: '#FFBB59' }}
                        >
                            1,500 Scholars
                        </Typography>
                        <Box
                            className="d-flex justify-content-between align-items-center mb-3"
                            sx={{ minWidth: 166 }}
                        >
                            <Typography variant="subtitle1">Amount:</Typography>
                            <Typography variant="subtitle1">459,967</Typography>
                        </Box>
                        <GFSButton sx={{ minWidth: 166, mb: 3 }}>Disburse</GFSButton>
                        <Typography variant="subtitle1">Next Payout: 05/30/2022</Typography>
                    </Box>
                    <Box
                        className="d-flex justify-content-center align-items-center flex-column"
                        sx={{ width: 240, p: 2, background: '#0B0821', borderRadius: '12px' }}
                    >
                        <Box
                            component="img"
                            sx={{
                                height: 80,
                                width: 80,
                                mb: 2
                            }}
                            alt="Icon"
                            src={'/axi.png'}
                        />
                        <Typography variant="h4" className="mb-1">
                            XLD Admin
                        </Typography>
                        <Typography
                            variant="subtitle1"
                            className="mb-2"
                            sx={{ fontSize: '16px', color: '#FFBB59' }}
                        >
                            1,500 Scholars
                        </Typography>
                        <Box
                            className="d-flex justify-content-between align-items-center mb-3"
                            sx={{ minWidth: 166 }}
                        >
                            <Typography variant="subtitle1">Amount:</Typography>
                            <Typography variant="subtitle1">459,967</Typography>
                        </Box>
                        <GFSButton sx={{ minWidth: 166, mb: 3 }}>Disburse</GFSButton>
                        <Typography variant="subtitle1">Next Payout: 05/30/2022</Typography>
                    </Box>
                    <Box
                        className="d-flex justify-content-center align-items-center flex-column"
                        sx={{ width: 240, p: 2, background: '#0B0821', borderRadius: '12px' }}
                    >
                        <Box
                            component="img"
                            sx={{
                                height: 80,
                                width: 80,
                                mb: 2
                            }}
                            alt="Icon"
                            src={'/bfnrcz.png'}
                        />
                        <Typography variant="h4" className="mb-1">
                            XLD Admin
                        </Typography>
                        <Typography
                            variant="subtitle1"
                            className="mb-2"
                            sx={{ fontSize: '16px', color: '#FFBB59' }}
                        >
                            1,500 Scholars
                        </Typography>
                        <Box
                            className="d-flex justify-content-between align-items-center mb-3"
                            sx={{ minWidth: 166 }}
                        >
                            <Typography variant="subtitle1">Amount:</Typography>
                            <Typography variant="subtitle1">459,967</Typography>
                        </Box>
                        <GFSButton sx={{ minWidth: 166, mb: 3 }}>Disburse</GFSButton>
                        <Typography variant="subtitle1">Next Payout: 05/30/2022</Typography>
                    </Box>
                </Box>

                <Box
                    sx={{
                        mt: 5,
                        mb: 5,
                        width: 800,
                        background: '#0B0821',
                        borderRadius: 11,
                        p: 2
                    }}
                >
                    <GFSTable>
                        <Table sx={{ minWidth: 750 }} aria-label="simple table">
                            <TableHead>
                                <TableRow>
                                    <TableCell>Group</TableCell>
                                    <TableCell align="center">Schedule</TableCell>
                                    <TableCell align="center">Amount</TableCell>
                                    <TableCell align="center">Status</TableCell>
                                </TableRow>
                            </TableHead>
                            <TableBody>
                                {items?.length > 0 &&
                                    items.map((row, index) => (
                                        <TableRow
                                            key={index}
                                            sx={{
                                                '&:last-child td, &:last-child th': {
                                                    border: 0
                                                }
                                            }}
                                            hover={true}
                                        >
                                            <TableCell>
                                                <Typography
                                                    variant={'h4'}
                                                    sx={{ fontWeight: '600' }}
                                                >
                                                    {row.name}
                                                </Typography>
                                            </TableCell>
                                            <TableCell align="center">
                                                <Typography
                                                    variant={'h6'}
                                                    sx={{ fontSize: '16px' }}
                                                >
                                                    {format(row.timestamp, 'MM/dd/yyyy')}
                                                </Typography>
                                            </TableCell>
                                            <TableCell align="center">
                                                <Typography
                                                    variant={'h6'}
                                                    sx={{ fontSize: '16px' }}
                                                >
                                                    $ {NumberTool.format(row.amount, 'bsc-usd')}{' '}
                                                </Typography>
                                            </TableCell>

                                            <TableCell align="center">
                                                {renderStatus(row.status)}
                                            </TableCell>
                                        </TableRow>
                                    ))}
                            </TableBody>
                        </Table>
                    </GFSTable>
                </Box>
            </Box>
        </MainLayout>
    );
};

export default NewUIPage;
